<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>list</title>
    <!-- 组件样式（全部的） -->
    <link rel="stylesheet" href="../../dist/tdesign.css">
    <!--
      TDesign 图标库，桌面端与移动端用同样的资源
      使用方式：<i class="t-icon t-icon-delete"></i>
    -->
    <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">

</head>
<body>
  <div class="tdesign-demo-wrap">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">List</h1>
      <p class="tdesign-demo-wrap__info">开发者：JrainLau</p>
      <p class="tdesign-demo-wrap__info">创建日期：2020-06-05</p>
      <p class="tdesign-demo-wrap__info">说明：TDesign list 组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 默认样式 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">类型</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>1.1.1 基础列表</h4>
        <!-- 内容区 Start-->
        <div class="t-list">
          <ul class="t-list__inner">
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>1.1.2 线性区分列表</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split">
          <ul class="t-list__inner">
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>1.1.3 斑马纹区分列表</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--stripe">
          <ul class="t-list__inner">
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
            <li class="t-list-item">
              列表内容列表内容列表内容
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>1.2 多行文字列表</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>1.3 基础图文列表</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>1.4.1 带操作列表</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
                <ul class="t-list-item__action">
                  <li><a href="">操作1</a></li>
                  <li><a href="">操作2</a></li>
                  <li><a href="">操作3</a></li>
                </ul>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
                <ul class="t-list-item__action">
                  <li><a href="">操作1</a></li>
                  <li><a href="">操作2</a></li>
                  <li><a href="">操作3</a></li>
                </ul>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
                <ul class="t-list-item__action">
                  <li><a href="">操作1</a></li>
                  <li><a href="">操作2</a></li>
                  <li><a href="">操作3</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>1.4.1.1* 带操作列表（垂直）</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split t-list--vertical-action">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
                <ul class="t-list-item__action">
                  <li><a href="">操作1</a></li>
                  <li><a href="">操作2</a></li>
                  <li><a href="">操作3</a></li>
                </ul>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
                <ul class="t-list-item__action">
                  <li><a href="">操作1</a></li>
                  <li><a href="">操作2</a></li>
                  <li><a href="">操作3</a></li>
                </ul>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
                <ul class="t-list-item__action">
                  <li><a href="">操作1</a></li>
                  <li><a href="">操作2</a></li>
                  <li><a href="">操作3</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>1.4.2 带图标操作</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
                <ul class="t-list-item__action">
                  <li><a href=""><i class="t-icon t-icon-success_fill"></i></a></li>
                  <li><a href=""><i class="t-icon t-icon-success_fill"></i></a></li>
                  <li><a href=""><i class="t-icon t-icon-success_fill"></i></a></li>
                </ul>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
                <ul class="t-list-item__action">
                  <li><a href=""><i class="t-icon t-icon-success_fill"></i></a></li>
                  <li><a href=""><i class="t-icon t-icon-success_fill"></i></a></li>
                  <li><a href=""><i class="t-icon t-icon-success_fill"></i></a></li>
                </ul>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
                <ul class="t-list-item__action">
                  <li><a href=""><i class="t-icon t-icon-success_fill"></i></a></li>
                  <li><a href=""><i class="t-icon t-icon-success_fill"></i></a></li>
                  <li><a href=""><i class="t-icon t-icon-success_fill"></i></a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>1.5* 额外内容</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>

                <ul class="t-list-item__action">
                  <li><a href="">操作1</a></li>
                  <li><a href="">操作2</a></li>
                  <li><a href="">操作3</a></li>
                </ul>
              </div>

              <div class="t-list-item__extra">
                <div style="height: 100px; line-height: 100px; width: 160px; text-align: center; background: #f0f0f0;">额外内容</div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>
    </div>

    <!-- 组件状态 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">状态</h2>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>1 滚动加载更多</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="t-list__load t-list__load--loading">
            <i class="t-icon t-icon-loading"></i>
            <span>正在加载中，请稍等</span>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>2 点击加载更多</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="t-list__load t-list__load--load-more">
            <span>点击加载更多</span>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>3 翻页</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="t-list__footer">
            <div class="t-pagination ">
              <!--数据统计区-->
              <div class="t-pagination__total">共 658 项数据</div>

              <!-- 向前按钮-->
              <div class="t-pagination__btn t-pagination__btn--prev">
                <i class="t-icon t-icon-arrow-left"></i>
              </div>
              <!-- 页数 -->
              <ul class="t-pagination__pager">
                <li class="t-pagination__number">1</li>
                <li class="t-pagination__number t-pagination__number--more"><i class="t-icon t-icon-demo"></i></li>
                <li class="t-pagination__number">50</li>
                <li class="t-pagination__number t-is-current">51</li>
                <li class="t-pagination__number">52</li>
                <li class="t-pagination__number">53</li>
                <li class="t-pagination__number">54</li>
                <li class="t-pagination__number t-pagination__number--more"><i class="t-icon t-icon-demo"></i></li>
                <li class="t-pagination__number">90</li>
              </ul>
              <!-- 向后按钮-->
              <div class="t-pagination__btn t-pagination__btn--next">
                <i class="t-icon t-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>4 滚动条</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split" style="max-height: 120px">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <h4>5 多内容</h4>
        <!-- 内容区 Start-->
        <div class="t-list t-list--split">
          <ul class="t-list__inner">
            <li class="t-list-item">
              <div class="t-list-item-main">
                <div class="t-list-item__meta">
                  <div class="t-list-item__meta-avatar">
                    <img src="" alt="" srcset="">
                  </div>
                  <div class="t-list-item__meta-content">
                    <h3 class="t-list-item__meta-title">
                      列表主内容
                    </h3>
                    <div class="t-list-item__meta-description">
                      <p>列表内容列表内容列表内容</p>
                      <p>列表内容列表内容列表内容</p>
                      <p>列表内容列表内容列表内容</p>
                      <p>列表内容列表内容列表内容</p>
                      <p>列表内容列表内容列表内容</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 内容区 End-->

      </div>
    </div>


    <!-- 组件尺寸 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">尺寸</h2>
      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <!-- 内容区 Start-->
        <h4>尺寸-小</h4>
        <div class="t-list t-size-s">
          <ul class="t-list__inner">
            <li class="t-list-item">列表内容列表内容</li>
          </ul>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <!-- 内容区 Start-->
        <h4>尺寸-中（默认）</h4>
        <div class="t-list">
          <ul class="t-list__inner">
            <li class="t-list-item">列表内容列表内容</li>
          </ul>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body tdesign-demo-item__body--list">
        <!-- 内容区 Start-->
        <h4>尺寸-大</h4>
        <div class="t-list t-size-l">
          <ul class="t-list__inner">
            <li class="t-list-item">列表内容列表内容</li>
          </ul>
        </div>
        <!-- 内容区 End-->
      </div>

  </div>

</body>
</html>
